<template>
    <div class="home">
        <!-- 二级路由的坑 -->
        <router-view v-if="$route.path=='/home/search'"></router-view>
        <div v-else>
            <!-- 搜索框 -->
            <van-search
            v-model="value"
            shape="round"
            placeholder="请输入搜索关键词"
            @click="$router.push('/home/search')"
            />
            <!-- 轮播图 -->
            <Swiper :bannerArr="bannerArr"></Swiper>
            <!-- 导航 -->
            <Grid :channelArr="channelArr"></Grid>
            <!-- 品牌制造商直供 -->
            <Brand :brandList="brandList"></Brand>
            <!-- 新品首发 -->
            <NewGoods :newGoodsList="newGoodsList"></NewGoods>
            <!-- 人气推荐 -->
            <HotGoods :hotGoodsList="hotGoodsList"></HotGoods>
            <!-- 专题精选 -->
            <TopicList :topicList="topicList"></TopicList>
            <!-- 分类 -->
            <CategoryList :categoryList="categoryList"></CategoryList>
        </div>
    </div>
</template>

<script>
import Swiper from '@/components/Swiper.vue';
import Grid from '@/components/home/Grid.vue';
import Brand from '@/components/home/Brand.vue';
import TopicList from '@/components/home/TopicList.vue';
import NewGoods from '@/components/home/NewGoods.vue';
import HotGoods from '@/components/home/HotGoods.vue';
import CategoryList from '@/components/home/CategoryList.vue';
// 导入首页接口请求
import { getIndexData } from '@/utils/http'
// console.log(getIndexData);
export default {
    name: "Home",
    props: [""],
    data() {
        return {
            value: '',  // 搜索的关键字
            bannerArr: [],  // 轮播图数据
            channelArr: [],  // 导航数组
            brandList: [],   // 品牌制造商直供
            topicList: [],   // 专题精选
            newGoodsList: [],  // 新品首发
            hotGoodsList: [],   // 人气推荐
            categoryList: [],  // 分类 
        };
    },
    components: { 
        Swiper,
        Grid,
        Brand,
        TopicList,
        NewGoods,
        HotGoods,
        CategoryList
    },

    computed: {},

    created() {
        // console.log(this.$route.path);
        getIndexData().then((res)=>{
            console.log(res);
            this.bannerArr = res.data.data.banner;
            this.channelArr = res.data.data.channel;
            this.brandList = res.data.data.brandList;
            this.topicList = res.data.data.topicList;
            this.newGoodsList = res.data.data.newGoodsList;
            this.hotGoodsList = res.data.data.hotGoodsList;
            this.categoryList = res.data.data.categoryList;
        })
    },

    mounted() {},

    methods: {},
};
</script>
<style lang='less' scoped>
.home {
    width: 100%;
    height: 100%;
}
</style>